<div class="container">
  <h2>Profile (Microfrontend)</h2>
  <p>This profile component is being remotely loaded into the application using Module Federation, angular is shared so
    the download is minimal for the frontend</p>

    <div class="card">
      <div class="card-body">
        <form [formGroup]="angForm">
          <div class="form-group">
            <input type="text" class="form-control" formControlName="name" placeholder="Name" #name/>
            <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
              <div *ngIf="angForm.controls['name'].errors.required">
                Name is required.
              </div>
            </div>
          </div>
          <div class="form-group">            
            <input type="email" class="form-control" formControlName="email" placeholder="Email" #email/>
            <div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)" class="alert alert-danger">
              <div *ngIf="angForm.controls['email'].errors.required">
                Email is required.
              </div>
            </div>
          </div>
          <div class="form-group">
            <button (click)="addUser(name.value, email.value)" 
                class="btn btn-primary"
                [disabled]="angForm.pristine || angForm.invalid">Create User</button>
          </div>
        </form>
      </div>
    </div>    

    <br />
    <lib-mdmf-shared></lib-mdmf-shared> 

    <app-profile-list-user></app-profile-list-user>

</div>
